<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>事件冒泡和捕获</title>
	<style>
		ul{
			display: flex;
		}
		ul li{
			width:100px;
			height:100px;
			background: lightblue;
			list-style: none;
			margin:5px 10px;
			text-align: center;
			line-height: 100px;
			font-size:20px;
		}
	</style>
</head>
<body>
	<ul id="ul">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>
	<script>
		const ul = document.getElementById('ul')
		ul.addEventListener('click', function(e){
			console.log(e.target.tagName)
			const target = e.target
			if(target.tagName.toLowerCase() === 'li') {
				const lists = document.querySelectorAll('li')
				const index = Array.prototype.indexOf.call(lists, target)
				alert(`内容为${target.innerHTML}索引为${index}`)
			}
		})

		const str = new String('hello world')
		console.log(str instanceof String)

		function Player(){
			this.color = 'red'
			this.fn = function(){
				console.log('this:::', this)
			}
		}

		const p1 = new Player()
		const p2 = new Player()
		console.log(p1.fn === p2.fn)
	</script>
</html>